<template>
    <van-list class="singer_class_page">
        <van-cell
            class="class-item"
            v-for="item in list"
            :key="item.id"
            :title="item.classname"
            :is-link="true"
            :to="`/singer/list/${item.classid}`"
        >
            <i class="iconfont icon-more"></i>
        </van-cell>
    </van-list>
</template>

<script>
import { ref, onBeforeMount } from 'vue'
import { getSingerClassify } from 'Api/singer'
export default {
    name: 'SingerClass',
    setup () {
        const list = ref([])

        onBeforeMount(async () => {
            const data = await getSingerClassify()
            list.value = data.list
        })

        return {
            list
        }
    }
}
</script>

<style lang="scss" scoped>
.singer_class_page {
    padding: 10px;
    .class-item {
        margin-bottom: 4px;
        border-radius: 5px;
        background: #fbfbfb;
        border: 1px solid #efefef;
        &::after {
            border: none !important;
        }
    }
}
</style>
